﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我的生活</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
</head>
<body>
    <!-- page集合的容器，里面放多个平行的.page，其他.page作为内联页面由路由控制展示 -->
    <div class="page-group">
        <div class="page page-current" id='router'>
            <header class="bar bar-nav" style="background-color:black">
                <a class="button button-link button-nav pull-left back">
                    <span class="icon icon-left"></span>
                    返回
                </a>
                <h1 class='title' style="color:white">添加报警</h1>
            </header>
            <div class="content" id="el">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">报警人</div>
                                    <div class="item-input">
                                        <input type="text" placeholder="" v-model="appeared.appeared_police_name" id="appeared_police_name">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- Date -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">报警时间</div>
                                    <div class="item-input">
                                        <input type="date" placeholder="Birth day" value="2018-08-30" v-model="appeared.appeared_police_time" id="appeared_police_time">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="align-top">
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-comment"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">报警地址</div>
                                    <div class="item-input">
                                        <textarea v-model="appeared.appeared_police_address" id="appeared_police_address"></textarea>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block">
                    <div class="row">
                        <div class="col-100"><a @click="confirm()" href="#" class="button button-big button-fill button-success">报警</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <script>
        $.init()
    </script>
    <script src="js/vue.min.js"></script>
    <script>
        function dynamicLoadJs() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "js/jquery.min.js";
            document.getElementsByTagName('body')[0].appendChild(script);
        }
        function GetQueryString(key) {
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = window.location.search.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : '';
        }
        var vm = new Vue({
            el: '#el',
            data: {
                carInfo: [],
                localurl: 'http://101.132.109.236:8081',
                appeared: {
                    appeared_police_name: '',
                    appeared_police_time: '',
                    appeared_police_address: '',
                },
                master: {
                    car_info_id: '',//id
                    car_owner_name: '',
                    car_brand: '',
                    robber_number: '',
                }

            },
            created: function () {
                if (GetQueryString('car_info_id')) {
                    this.master.car_info_id = GetQueryString('car_info_id');
                }
                if (GetQueryString('car_owner_name')) {
                    this.master.car_owner_name = GetQueryString('car_owner_name');
                }
                if (GetQueryString('car_brand')) {
                    this.master.car_brand = GetQueryString('car_brand');
                }
                if (GetQueryString('robber_number')) {
                    this.master.robber_number = GetQueryString('robber_number');
                }
            },
            methods: {
                confirm: function () {
                    var name = /^[\u4e00-\u9fa5]{2,4}$/;
                    if (!name.test(vm.appeared.appeared_police_name)) {
                        $("#appeared_police_name").focus();
                        $.toast("请输入正确姓名");
                        return;
                    }
                    if (vm.appeared.appeared_police_time == '') {
                        $("#appeared_police_time").focus();
                        $.toast("请输入报警时间");
                        return;
                    }
                    if (vm.appeared.appeared_police_address == '') {
                        $("#appeared_police_address").focus();
                        $.toast("请输入报警地址");
                        return;
                    }
                    //dynamicLoadJs();
                    vm.editinfo();
                },
                editinfo: function () {
                    var appeared = {
                        car_info_id: vm.master.car_info_id,//id
                        car_owner_name: vm.master.car_owner_name,
                        car_brand: vm.master.car_brand,
                        robber_number: vm.master.robber_number,

                        appeared_police_name: vm.appeared.appeared_police_name,
                        appeared_police_time: vm.appeared.appeared_police_time,
                        appeared_police_address: vm.appeared.appeared_police_address,
                        appeared_police_state: '1',
                    }
                    var token = localStorage.getItem("token");
                    console.log(appeared)
                    $.ajax({
                        url: '' + vm.localurl + '/CarPolice/Insert',
                        data: JSON.stringify(appeared),
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        xhrFields: {
                            withCredentials: true
                        },
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("token", token);
                        },
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                $.toast("报警成功！");
                                $.router.back();
                            }
                        },
                        error: function () {

                        }
                    });
                },
            }
        })

    </script>
</body>
</html>